<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue component组件标签</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue component组件标签</h1>
<hr>
<div id="app">
    <component :is="who"></component>
    <p><button @click="changeComponent"> changeComponent</button></p>
</div>
<script type="text/javascript">
    //定义三个组件
    var componentA={
      template:`<div style="color: red">this is componentA.</div>`
    }
    var componentB={
      template:`<div style="color: green">this is componentB.</div>`
    }
    var componentC={
      template:`<div style="color: yellow">this is componentC.</div>`
    }
    var app = new Vue({
      el:'#app',
      data:{
        message:'hello world!',
        who:'componentA'
      },
      components:{
        'componentA': componentA,
        'componentB': componentB,
        'componentC': componentC
      },
      methods:{
        changeComponent(){
          if(this.who=='componentA'){
            this.who = 'componentB'
          }else if(this.who == 'componentB'){
            this.who = 'componentC'
          }else {
            this.who = 'componentA'
          }
        }
      }
    })
</script>
</body>
</html>